<!-- @format -->

<script setup>
	// 数据源（对象数组）
	const tableData = [
		{
			date: '2016-05-03',
			name: 'Tom',
			address: 'No. 189, Grove St, Los Angeles'
		},
		{
			date: '2016-05-02',
			name: 'Jack',
			address: 'No. 189, Grove St, Los Angeles'
		},
		{
			date: '2016-05-04',
			name: 'Rose',
			address: 'No. 189, Grove St, Los Angeles'
		},
		{
			date: '2016-05-01',
			name: 'Linda',
			address: 'No. 189, Grove St, Los Angeles'
		}
	]
</script>

<template>
	<!-- 
    el-table: 表格组件, 在 element-plus 中，表格是由跟多列构成的
      data: 数据源，根据这个数据渲染生成列结构
      style: 行内样式 
  -->
	<el-table
		border
		stripe
		:data="tableData"
		style="width: 100%">
		<el-table-column
			label="日期"
			width="180">
			<template #default="{ row }">
				<el-icon :size="14">
					<Timer />
				</el-icon>
				<span>{{ row.date }}</span>
			</template>
		</el-table-column>

		<el-table-column
			label="名称"
			width="180">
			<!-- 
         自定义列模版：需要通过作用域插槽
           row： 每一行的数据对象
      -->
			<template #default="{ row }">
				<el-tag type="success">
					{{ row.name }}
				</el-tag>
			</template>
		</el-table-column>
		<el-table-column
			prop="address"
			label="地址" />

		<el-table-column label="操作">
			<template #default>
				<el-icon :size="14">
					<Delete />
				</el-icon>
				<el-icon :size="14">
					<Edit />
				</el-icon>
			</template>
		</el-table-column>
	</el-table>
</template>
